<template>
    <div class="white-box">
        <cell-tip tip="一键设置分类风格，让你的店铺更适合大众" />
        <div class="dcs-one">当前风格示例</div>
        <div class="preview-box">
            <div class="preview-item" v-for="(item, index) in styleArrs" :key="index">
                <img :src="item.img" />
                <p class="preview-item__select">
                    <el-radio v-model="cur" :label="index" @change="radisChange(index)">{{ item.text }}</el-radio>
                </p>
            </div>
        </div>

        <div class="foot-btn flexs-center">
            <el-button type="primary" size="large" :loading="btn_loading" @click="handleConfirm">保存</el-button>
        </div>
    </div>
</template>

<script setup>
import { getCurrentInstance, ref, onMounted } from "vue"
import CellTip from "@components/cell-tip.vue"

const { proxy } = getCurrentInstance()

onMounted(() => {
    getConfigs()
})

function getConfigs() {
    proxy.$axios
        .get("decorate/cateStyle")
        .then((res) => {
            if (res.data.code == 0) {
                let result = res.data.data.style
                cur.value = result.classStyle - 1 < 0 ? 0 : result.classStyle - 1
            } else {
                proxy.$message({ message: res.data.msg, type: "error" })
            }
        })
        .catch((err) => {})
}

// 设置分类风格
const cur = ref(0) // 1是分类下公共商品，2是商品列表
const styleArrs = ref([
    {
        text: "展示公共商品",
        img: "https://saas.huashushop.com/saas/img/cate1.jpg",
        type: 1,
    },
    {
        text: "展示商品列表",
        img: "https://saas.huashushop.com/saas/img/cate2.jpg",
        type: 2,
    },
])
const radisChange = (index) => {
    cur.value = index
}

// 保存
const btn_loading = ref(false)
const handleConfirm = () => {
    let objs = {
        classStyle: styleArrs.value[cur.value].type,
    }
    btn_loading.value = true
    proxy.$axios
        .post("decorate/cateStyle", {
            style: JSON.stringify(objs),
        })
        .then((res) => {
            btn_loading.value = false
            if (res.data.code == 0) {
                proxy.$message({ message: "保存成功！", type: "success" })
            } else {
                proxy.$message({ message: res.data.msg, type: "error" })
            }
        })
        .catch((err) => {
            btn_loading.value = false
        })
}
</script>
<script>
export default {
    name: "DecoCateStyle",
}
</script>

<style lang="less" scoped>
.preview-box {
    width: 100%;
    position: relative;
    display: flex;
    justify-content: center;
    .preview-item {
        width: 250px;
        position: relative;
        display: flex;
        flex-direction: column;
        margin-left: 100px;
        &:first-child {
            margin-left: 0;
        }
    }

    .preview-item__select {
        width: 100%;
        text-align: center;
        font-size: @font-size-md;
        color: @gray-8;
        padding-top: @padding-mdl;
    }
}
.white-box {
    width: 100%;
    min-height: 850px;
    .dcs-one {
        padding: @padding-xl 0;
        font-size: @font-size-md;
        color: @gray-8;
        display: flex;
        align-items: center;
    }
}
</style>
